import React from 'react';

import 'amis/lib/themes/default.css';
// 或 import 'amis/lib/themes/cxd.css';
// 或 import 'amis/lib/themes/dark.css';

import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';

import axios from 'axios';
import copy from 'copy-to-clipboard';

import {render as renderAmis, ToastComponent, AlertComponent} from 'amis';
import {alert, confirm} from 'amis/lib/components/Alert';
import {toast} from 'amis/lib/components/Toast';

// amis 环境配置
const env = {
  // 下面三个接口必须实现
  fetcher: ({
              url, // 接口地址
              method, // 请求方法 get、post、put、delete
              data, // 请求数据
              responseType,
              config, // 其他配置
              headers // 请求头
            }: any) => {
    config = config || {};
    config.withCredentials = true;
    responseType && (config.responseType = responseType);

    if (config.cancelExecutor) {
      config.cancelToken = new (axios as any).CancelToken(
        config.cancelExecutor
      );
    }

    config.headers = headers || {};

    if (method !== 'post' && method !== 'put' && method !== 'patch') {
      if (data) {
        config.params = data;
      }
      return (axios as any)[method](url, config);
    } else if (data && data instanceof FormData) {
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (
      data &&
      typeof data !== 'string' &&
      !(data instanceof Blob) &&
      !(data instanceof ArrayBuffer)
    ) {
      data = JSON.stringify(data);
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'application/json';
    }

    return (axios as any)[method](url, data, config);
  },
  isCancel: (value: any) => (axios as any).isCancel(value),
  copy: (content: string) => {
    copy(content);
    toast.success('内容已复制到粘贴板');
  }

  // 后面这些接口可以不用实现

  // 默认是地址跳转
  // jumpTo: (
  //   location: string /*目标地址*/,
  //   action: any /* action对象*/
  // ) => {
  //   // 用来实现页面跳转, actionType:link、url 都会进来。
  // },

  // updateLocation: (
  //   location: string /*目标地址*/,
  //   replace: boolean /*是replace，还是push？*/
  // ) => {
  //   // 地址替换，跟 jumpTo 类似
  // },

  // isCurrentUrl: (
  //   url: string /*url地址*/,
  // ) => {
  //   // 用来判断是否目标地址当前地址
  // },

  // notify: (
  //   type: 'error' | 'success' /**/,
  //   msg: string /*提示内容*/
  // ) => {
  //   toast[type]
  //     ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
  //     : console.warn('[Notify]', type, msg);
  // },
  // alert,
  // confirm,
};
const init=      {
    'definitions': {
      'options': {
        'type': 'combo',
        'multiple': true,
        'multiLine': true,
        'name': 'options',
        'items': [
          {
            'type': 'group',
            'body': [
              {
                'label': '名称',
                'name': 'label',
                'type': 'input-text',
                'required': true
              },
              {
                'label': '值',
                'name': 'value',
                'type': 'input-text',
                'required': true
              }
            ]
          },
          {
            'label': '包含子选项',
            'type': 'switch',
            'name': 'hasChildren',
            'mode': 'inline',
            'className': 'block'
          },
          {
            '$ref': 'options',
            'label': '子选项',
            'name': 'children',
            'visibleOn': 'this.hasOwnProperty(\'hasChildren\') && this.hasChildren',
            'addButtonText': '新增子选项'
          }
        ]
      },
      'options2': {
        'type': 'combo',
        'multiple': true,
        'multiLine': true,
        'name': 'options2',
        'items': [
          {
            'type': 'group',
            'body': [
              {
                'label': '标签',
                'name': 'label',
                'type': 'input-text',
                'required': true
              },
              {
                'label': '默认值',
                'name': 'defaultvalue',
                'type': 'input-text',
                'required': false
              },
              {
                "type": "select",
                'name':'sort',
                "label": "输入框类型",
                'value':'Input',
                "options": [
                  {
                    "label": "输入框",
                    "value": "input-text"
                  },
                  {
                    "label": "日期选择器",
                    "value": "input-date"
                  },
                  {
                    "label": "下拉框",
                    "value": "select"
                  },
                  {
                    "label": "开关",
                    "value": "switch"
                  },
                  {
                    "label": "文件上传",
                    "value": "input-file"
                  },
                  {
                    "label": "图片上传",
                    "value": "input-image"
                  },
                  {
                    "label": "可编辑表格",
                    "value": "input-table"
                  },
                  {
                    "label": "人员选择器",
                    "value": "tabs-transfer-picker"
                  },
                ],
              },

            ]
          },
          {
            'label': '包含选项',
            'type': 'switch',
            'name': 'hasChildren',
            'mode': 'inline',
            'className': 'block'
          },
          {
            '$ref': 'options',
            'label': '子选项',
            'name': 'children',
            'visibleOn': 'this.hasOwnProperty(\'hasChildren\') && this.hasChildren',
            'addButtonText': '新增下属选项'
          }
        ]
      }
    },
    'type': 'page',
    'title': '表单创建工具',
    'body': [
      {
        'name':'tax',
        'type': 'form',
        'api': 'newformapi/api/json-save',
        'actions': [{
          'type': 'reset',
          'label': '重置'
        },
          {
            'type': 'submit',
            'label': '提交',
            'level': 'primary'
          }],
        'body': [
          {
            'name':'tablename',
            'type':'input-text',
            'label':'本表单命名'
          },
          {
            'name':'keyword',
            'type':'input-text',
            'label':'键名称',
          },
          {
            'name':'fieldword',
            'type':'input-text',
            'label':'域名称'
          },
          {
            'name':'taxb',
            '$ref': 'options2',
            'label': '表单内容'
          },
          // {
          //   'type': 'static',
          //   'label': '当前值',
          //   'tpl': '<pre>${options2|json}</pre>'
          // }
        ]
      }
    ]
  }
  class AMISComponent extends React.Component<any, any> {
  render() {
    return renderAmis(
      // 这里是 amis 的 Json 配置。
      init,
      {
        // props...
      },
      env
    );
  }
}

class APP extends React.Component<any, any> {
  render() {
    return (
      <>
        <ToastComponent key='toast' position={'top-middle'} />
        <AlertComponent key='alert' />
        <AMISComponent />
      </>
    );
  }
}

export default APP;
